{#**
*
* 功能描述（主页模板）
*
* @author suoya <jlusuoya@gmail.com>
* @version 1
*#}

{#include file="header.tpl" title="网站主页" menuIdx=0 headImg="index"#}
{#include file="define.tpl" scope=parent#}

<div id="content">
    <div class="focusimg fL" id="play" style="height:355px">
        <script language =javascript >
            var flashxml = {#$disImg#};
            var curIndex = 0;
            //时间间隔 单位毫秒
            var timeInterval = 8000;
            var arr = eval(flashxml);
            Interval = setInterval(changeImg, timeInterval);
            function changeImg()
            {
                var obj = document.getElementById("obj");
                if (curIndex == arr.length - 1)
                {
                    curIndex = 0;
                }
                else if (curIndex < -1)
                {
                    curIndex = arr.length - 1;
                }
                else
                {
                    curIndex += 1;
                }
                $('#obj').attr('src', arr[curIndex].src);
                $('#obj').parent().attr('href', arr[curIndex].url).attr('title', arr[curIndex].text);
                $('#obj').parents('#play').find('span i').removeClass('cur');
                $('#obj').parents('#play').find('span i:eq(' + curIndex + ')').attr('class', 'cur');
            }
            function changeIndex(flag)
            {
                if ("minus" == flag)
                {
                    curIndex -= 2;
                }
                changeImg();
                clearInterval(Interval);
                Interval = setInterval(changeImg, timeInterval);
            }
            $(function() {
                //幻灯处理
                $('#play span i').click(function() {
                    curIndex = $(this).index();
                    curIndex = curIndex - 1;
                    changeImg();
                    clearInterval(Interval);
                    Interval = setInterval(changeImg, timeInterval);
                });
                $(".transparent1").each(function() {
                    $(this).bind("mouseenter", function() {
                        $(this).removeClass().addClass("transparent2");
                    });
                    $(this).bind("mouseleave", function() {
                        $(this).removeClass().addClass("transparent1");
                    });
                });
                $("#play").bind("mouseenter", function() {
                    $(".arrow").show();
                });
                $("#play").bind("mouseleave", function() {
                    $(".arrow").hide();
                });
                $("#group img").each(function() {
                    $(this).bind("mouseenter", function() {
                        $(this).removeClass().addClass("transparent1");
                    });
                    $(this).bind("mouseleave", function() {
                        $(this).removeClass();
                    });
                });
            });

        </script>
        <a href="{#$img_first['url']#}" title="{#$img_first['text']#}">
            <img src="{#$img_first['src']#}" id="obj" width="996" height="354"/>
        </a>
        <span>
            <i class="cur">1</i>
            {#for $idx = 2 to $img_cnt#}<i>{#$idx#}</i>{#/for#}
        </span>
        <ul class="arrow" style="display:none;">
            <li class="left"> <img src="images/left1.png" onclick="changeIndex('minus');" class="transparent1" width="72" height="118"/></li>
            <li class="right"> <img src="images/right1.png" onclick="changeIndex();" class="transparent1"  width="72" height="118"/></li>
        </ul>
    </div>
    <div id='group'>
        {#if $cakes|count > 0#}
            <ol>
                {#foreach $cakes as $k => $item#}
                    {#if $k%4 == 0 and $item@index != 0#}
                    </ol>
                    <ol>
                    {#/if#}
                    <li style="float: left;display: inline-block; width: 241px; height: 241px; {#if ($item@index + 1)%4 == 0 and $item@index != 0#}margin-right: 0px;{#else#}  margin-right: 11px;{#/if#}">
                        <a href="index.php?action=food.detail&id={#$item['id']#}" title="《{#$item['name']#}》{#$cake_type[$item['type']]#} {#$cake_type2[$item['type2']]#}:{#$item['introduce']#}">
                            <img src="data/cake/cake_{#$item['id']#}.jpg" height="241px" width="241px" />
                        </a>
                    </li>
                {#/foreach#}
            </ol>
        {#else#}
            <p style='color:#ff0000; font-size: 24px'>没有发现蛋糕啊</p>
        {#/if#}
    </div>
</div>
{#include file="footer.tpl"#}
